<template>
	<div>
		<div style="text-align: left; border: 1px solid gainsboro; border-radius: 20px; width: 300px;">
			<h1 style="margin-left: 20px;">我的余额</h1>
			<div style="margin-left: 70px;" v-model="balance">
				<h3>{{balance}}</h3>
			</div>
		</div>

		<!-- 教练详细信息弹窗 -->
		<el-dialog title="教练信息" :visible.sync="coachFormVisible">
			<el-form :model="coach" disabled="true">
				<el-form-item label="名字" :label-width="formLabelWidth">
					<el-input v-model="coach.name" autocomplete="off"></el-input>
				</el-form-item>
				<el-form-item label="生日" :label-width="formLabelWidth">
					<el-col :span="11">
						<el-date-picker type="date" placeholder="选择日期" v-model="coach.birthday" style="width: 100%;">
						</el-date-picker>
					</el-col>
				</el-form-item>
				<el-form-item label="电话" :label-width="formLabelWidth">
					<el-input v-model="coach.phone" autocomplete="off"></el-input>
				</el-form-item>
				<el-form-item label="QQ号" :label-width="formLabelWidth">
					<el-input v-model="coach.qq" autocomplete="off"></el-input>
				</el-form-item>
				<el-form-item label="性别" :label-width="formLabelWidth">
					<el-radio-group v-model="coach.sex" :label-width="formLabelWidth">
						<el-radio :label="1">男</el-radio>
						<el-radio :label="2">女</el-radio>
					</el-radio-group>
				</el-form-item>
				<el-form-item label="级别" :label-width="formLabelWidth">
					<el-radio-group v-model="coach.level" :label-width="formLabelWidth">
						<el-radio :label="1">金牌教练</el-radio>
						<el-radio :label="2">银牌教练</el-radio>
					</el-radio-group>
				</el-form-item>
				<el-form-item label="粉丝数" :label-width="formLabelWidth">
					<el-input v-model="coach.fans" autocomplete="off"></el-input>
				</el-form-item>
			</el-form>
		</el-dialog>
		<!-- 课程详细信息弹窗 -->
		<el-dialog title="课程信息" :visible.sync="courseFormVisible">
			<el-form :model="course" disabled="true">
				<el-form-item label="名字" :label-width="formLabelWidth">
					<el-input v-model="course.courseName" autocomplete="off"></el-input>
				</el-form-item>
				<el-form-item label="开始时间" :label-width="formLabelWidth">
					<el-col :span="11">
						<el-date-picker type="date" placeholder="选择日期" v-model="course.courseStartTime"
							style="width: 100%;"></el-date-picker>
					</el-col>
					<el-col class="line" :span="2">-</el-col>
					<el-col :span="11">
						<el-time-picker placeholder="选择时间" v-model="course.courseStartTime" style="width: 100%;">
						</el-time-picker>
					</el-col>
				</el-form-item>
				<el-form-item label="结束时间" :label-width="formLabelWidth">
					<el-col :span="11">
						<el-date-picker type="date" placeholder="选择日期" v-model="course.courseEndTime"
							style="width: 100%;"></el-date-picker>
					</el-col>
					<el-col class="line" :span="2">-</el-col>
					<el-col :span="11">
						<el-time-picker placeholder="选择时间" v-model="course.courseEndTime" style="width: 100%;">
						</el-time-picker>
					</el-col>
				</el-form-item>
				<el-form-item label="价格" :label-width="formLabelWidth">
					<el-input v-model="course.courseMoney" autocomplete="off"></el-input>
				</el-form-item>

				<el-form-item label="人数" :label-width="formLabelWidth">
					<el-input v-model="course.courseNum" autocomplete="off"></el-input>
				</el-form-item>
				<el-form-item label="课程描述" :label-width="formLabelWidth">
					<el-input v-model="course.courseDescription" autocomplete="off"></el-input>
				</el-form-item>
			</el-form>
		</el-dialog>
		
		<!-- 训练营详细信息弹窗 -->
		<el-dialog title="训练营信息" :visible.sync="campFormVisible">
			<el-form :model="course" disabled="true">
				<el-form-item label="名字" :label-width="formLabelWidth">
					<el-input v-model="course.courseName" autocomplete="off"></el-input>
				</el-form-item>
				<el-form-item label="价格" :label-width="formLabelWidth">
					<el-input v-model="course.courseMoney" autocomplete="off"></el-input>
				</el-form-item>
		
				<el-form-item label="人数" :label-width="formLabelWidth">
					<el-input v-model="course.courseNum" autocomplete="off"></el-input>
				</el-form-item>
				<el-form-item label="课程描述" :label-width="formLabelWidth">
					<el-input v-model="course.courseDescription" autocomplete="off"></el-input>
				</el-form-item>
			</el-form>
		</el-dialog>

		<div style="text-align: left; border: 1px solid gainsboro; border-radius: 20px; margin-top: 20px;">
			<h1 style="margin-left: 20px;">我的账单</h1>
			<div style="margin-left: 20px;margin-bottom: 20px;width: 1000px;">
				<template>
					<el-tabs type="border-card" v-model="activeType" @tab-click="handleType">
						<el-tab-pane label="课程" name="first">
							<template>
								<el-tabs v-model="activeCourse" @tab-click="handleCourse">
									<el-tab-pane label="全部订单" name="first">
										<el-table :data="pageInfo.list" stripe style="width: 100%; line-height: 30px;">
											<el-table-column prop="orderNo" label="订单号">
											</el-table-column>
											<el-table-column prop="courseDetails.courseName" label="课程">
											</el-table-column>
											<el-table-column prop="coach.name" label="教练">
											</el-table-column>
											<el-table-column prop="orderTime" label="下单时间" width="180">
											</el-table-column>
											<el-table-column align="right" width="250">
												<template slot-scope="scope">
													<el-button size="mini" type="primary"
														@click="showCoach(scope.$index, scope.row)">
														教练信息</el-button>
													<el-button size="mini" type="danger"
														@click="showCourse(scope.$index, scope.row)">
														课程详情
													</el-button>
												</template>
											</el-table-column>
										</el-table>
										<div class="block">
											<el-pagination @size-change="handleAllCourseSize"
												@current-change="handleAllCourseCurrent" :current-page="currentPage"
												:page-sizes="[2, 5, 10]" :page-size="pageInfo.pageSize"
												layout="total, sizes, prev, pager, next, jumper"
												:total="pageInfo.total">
											</el-pagination>
										</div>
									</el-tab-pane>
									<el-tab-pane label="未开始" name="second">
										<el-table :data="pageInfo.list" stripe style="width: 100%; line-height: 30px;">
											<el-table-column prop="orderNo" label="订单号">
											</el-table-column>
											<el-table-column prop="courseDetails.courseName" label="课程">
											</el-table-column>
											<el-table-column prop="coach.name" label="教练">
											</el-table-column>
											<el-table-column prop="orderTime" label="下单时间" width="180">
											</el-table-column>
											<el-table-column align="right" width="250">
												<template slot-scope="scope">
													<el-button size="mini" type="primary"
														@click="showCoach(scope.$index, scope.row)">
														教练信息</el-button>
													<el-button size="mini" type="danger"
														@click="showCourse(scope.$index, scope.row)">
														课程详情
													</el-button>
												</template>
											</el-table-column>
										</el-table>
										<div class="block">
											<el-pagination @size-change="handleCourseSize"
												@current-change="handleCourseCurrent" :current-page="currentPage"
												:page-sizes="[2, 5, 10]" :page-size="pageInfo.pageSize"
												layout="total, sizes, prev, pager, next, jumper"
												:total="pageInfo.total">
											</el-pagination>
										</div>
									</el-tab-pane>
									<el-tab-pane label="已完成" name="third">
										<el-table :data="pageInfo.list" stripe style="width: 100%; line-height: 30px;">
											<el-table-column prop="orderNo" label="订单号">
											</el-table-column>
											<el-table-column prop="courseDetails.courseName" label="课程">
											</el-table-column>
											<el-table-column prop="coach.name" label="教练">
											</el-table-column>
											<el-table-column prop="orderTime" label="下单时间" width="180">
											</el-table-column>
											<el-table-column align="right" width="250">
												<template slot-scope="scope">
													<el-button size="mini" type="primary"
														@click="showCoach(scope.$index, scope.row)">
														教练信息</el-button>
													<el-button size="mini" type="danger"
														@click="showCourse(scope.$index, scope.row)">
														课程详情
													</el-button>
												</template>
											</el-table-column>
										</el-table>
										<div class="block">
											<el-pagination @size-change="handleCourseSize"
												@current-change="handleCourseCurrent" :current-page="currentPage"
												:page-sizes="[2, 5, 10]" :page-size="pageInfo.pageSize"
												layout="total, sizes, prev, pager, next, jumper"
												:total="pageInfo.total">
											</el-pagination>
										</div>
									</el-tab-pane>
									<el-tab-pane label="未正常进行" name="fourth">
										<el-table :data="pageInfo.list" stripe style="width: 100%; line-height: 30px;">
											<el-table-column prop="orderNo" label="订单号">
											</el-table-column>
											<el-table-column prop="courseDetails.courseName" label="课程">
											</el-table-column>
											<el-table-column prop="coach.name" label="教练">
											</el-table-column>
											<el-table-column prop="orderTime" label="下单时间" width="180">
											</el-table-column>
											<el-table-column align="right" width="250">
												<template slot-scope="scope">
													<el-button size="mini" type="primary"
														@click="showCoach(scope.$index, scope.row)">
														教练信息</el-button>
													<el-button size="mini" type="danger"
														@click="showCourse(scope.$index, scope.row)">
														课程详情
													</el-button>
												</template>
											</el-table-column>
										</el-table>
										<div class="block">
											<el-pagination @size-change="handleCourseSize"
												@current-change="handleCourseCurrent" :current-page="currentPage"
												:page-sizes="[2, 5, 10]" :page-size="pageInfo.pageSize"
												layout="total, sizes, prev, pager, next, jumper"
												:total="pageInfo.total">
											</el-pagination>
										</div>
									</el-tab-pane>
								</el-tabs>
							</template>
						</el-tab-pane>
						<el-tab-pane label="训练营" name="second">
							<template>
								<el-tabs v-model="activeCamp" @tab-click="handleCamp">
									<el-tab-pane label="全部订单" name="first">
										<el-table :data="pageInfo.list" stripe style="width: 100%; line-height: 30px;">
											<el-table-column prop="orderNo" label="订单号">
											</el-table-column>
											<el-table-column prop="courseDetailsCamp[0].courseName" label="课程">
											</el-table-column>
											<el-table-column prop="coach.name" label="教练">
											</el-table-column>
											<el-table-column prop="orderTime" label="下单时间" width="180">
											</el-table-column>
											<el-table-column align="right" width="250">
												<template slot-scope="scope">
													<el-button size="mini" type="primary"
														@click="showCoach(scope.$index, scope.row)">
														教练信息</el-button>
													<el-button size="mini" type="danger"
														@click="showCamp(scope.$index, scope.row)">
														课程详情
													</el-button>
												</template>
											</el-table-column>
										</el-table>
										<div class="block">
											<el-pagination @size-change="handleAllCoachSize"
												@current-change="handleAllCoachCurrent" :current-page="currentPage"
												:page-sizes="[2, 5, 10]" :page-size="pageInfo.pageSize"
												layout="total, sizes, prev, pager, next, jumper"
												:total="pageInfo.total">
											</el-pagination>
										</div>
									</el-tab-pane>
									<el-tab-pane label="未开始" name="second">
										<el-table :data="pageInfo.list" stripe style="width: 100%; line-height: 30px;">
											<el-table-column prop="orderNo" label="订单号">
											</el-table-column>
											<el-table-column prop="courseDetailsCamp[0].courseName" label="课程">
											</el-table-column>
											<el-table-column prop="coach.name" label="教练">
											</el-table-column>
											<el-table-column prop="orderTime" label="下单时间" width="180">
											</el-table-column>
											<el-table-column align="right" width="250">
												<template slot-scope="scope">
													<el-button size="mini" type="primary"
														@click="showCoach(scope.$index, scope.row)">
														教练信息</el-button>
													<el-button size="mini" type="danger"
														@click="showCamp(scope.$index, scope.row)">
														课程详情
													</el-button>
												</template>
											</el-table-column>
										</el-table>
										<div class="block">
											<el-pagination @size-change="handleAllCoachSize"
												@current-change="handleAllCoachCurrent" :current-page="currentPage"
												:page-sizes="[2, 5, 10]" :page-size="pageInfo.pageSize"
												layout="total, sizes, prev, pager, next, jumper"
												:total="pageInfo.total">
											</el-pagination>
										</div>
									</el-tab-pane>
									<el-tab-pane label="已完成" name="third">
										<el-table :data="pageInfo.list" stripe style="width: 100%; line-height: 30px;">
											<el-table-column prop="orderNo" label="订单号">
											</el-table-column>
											<el-table-column prop="courseDetailsCamp[0].courseName" label="课程">
											</el-table-column>
											<el-table-column prop="coach.name" label="教练">
											</el-table-column>
											<el-table-column prop="orderTime" label="下单时间" width="180">
											</el-table-column>
											<el-table-column align="right" width="250">
												<template slot-scope="scope">
													<el-button size="mini" type="primary"
														@click="showCoach(scope.$index, scope.row)">
														教练信息</el-button>
													<el-button size="mini" type="danger"
														@click="showCamp(scope.$index, scope.row)">
														课程详情
													</el-button>
												</template>
											</el-table-column>
										</el-table>
										<div class="block">
											<el-pagination @size-change="handleAllCoachSize"
												@current-change="handleAllCoachCurrent" :current-page="currentPage"
												:page-sizes="[2, 5, 10]" :page-size="pageInfo.pageSize"
												layout="total, sizes, prev, pager, next, jumper"
												:total="pageInfo.total">
											</el-pagination>
										</div>
									</el-tab-pane>
									<el-tab-pane label="未正常进行" name="fourth">
										<el-table :data="pageInfo.list" stripe style="width: 100%; line-height: 30px;">
											<el-table-column prop="orderNo" label="订单号">
											</el-table-column>
											<el-table-column prop="courseDetailsCamp[0].courseName" label="课程">
											</el-table-column>
											<el-table-column prop="coach.name" label="教练">
											</el-table-column>
											<el-table-column prop="orderTime" label="下单时间" width="180">
											</el-table-column>
											<el-table-column align="right" width="250">
												<template slot-scope="scope">
													<el-button size="mini" type="primary"
														@click="showCoach(scope.$index, scope.row)">
														教练信息</el-button>
													<el-button size="mini" type="danger"
														@click="showCamp(scope.$index, scope.row)">
														课程详情
													</el-button>
												</template>
											</el-table-column>
										</el-table>
										<div class="block">
											<el-pagination @size-change="handleAllCoachSize"
												@current-change="handleAllCoachCurrent" :current-page="currentPage"
												:page-sizes="[2, 5, 10]" :page-size="pageInfo.pageSize"
												layout="total, sizes, prev, pager, next, jumper"
												:total="pageInfo.total">
											</el-pagination>
										</div>
									</el-tab-pane>
								</el-tabs>
							</template>
						</el-tab-pane>
					</el-tabs>
				</template>


			</div>
		</div>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				activeCamp: 'first',
				activeCourse: 'first',
				activeType: 'first',
				balance: '',
				currentPage: 1,
				pageSize: 2,
				pageInfo: '',
				status: '',
				coach: '',
				course: {
					courseName: "",
					place: "",
					courseType: "",
					courseStartTime: "",
					courseEndTime: "",
					courseStatus: "",
					courseDescription: "",
					courseMoney: "",
					courseNum: "",
				},
				coachFormVisible: false,
				formLabelWidth: '120px',
				courseFormVisible: false,
				campFormVisible: false,
				camp:[],
			};
		},
		methods: {
			handleCamp(tab, event) {
				console.log(tab, event);
				if (tab.index == 3) {
					this.status = 6;
					this.getCampStatusOrder();
				} else if (tab.index == 1) {
					this.status = 2;
					this.getCampStatusOrder();
				} else if (tab.index == 2) {
					this.status = 1;
					this.getCampStatusOrder();
				} else {
					this.getCampOrder();
				}
			},
			handleCourse(tab, event) {
				console.log(tab);
				if (tab.index == 3) {
					this.status = 6;
					this.getCourseStatusOrder();
				} else if (tab.index == 1) {
					this.status = 2;
					this.getCourseStatusOrder();
				} else if (tab.index == 2) {
					this.status = 1;
					this.getCourseStatusOrder();
				} else {
					this.getCourseOrder();
				}
			},
			handleType(tab, event) {
				if (tab.index == 0) {
					this.getCourseOrder();
					this.activeCamp = 'first';
					this.activeCourse = 'first';
				} else {
					this.getCampOrder();
					this.activeCamp = 'first';
					this.activeCourse = 'first';
				}

			},
			getBalance() {
				this.axios.get("http://localhost:8080/user/" + 1).then(res => {
					console.log(res.data.data);
					this.balance = res.data.data
				})
			},
			getCourseOrder() {
				this.axios.get("http://localhost:8080/user/order/" + 1 + "/" + this.currentPage + "/" + this.pageSize)
					.then(
						res => {
							console.log(res.data.data);
							this.pageInfo = res.data.data
						})
			},
			getCampOrder() {
				this.axios.get("http://localhost:8080/user/campOrder/" + 1 + "/" + this.currentPage + "/" + this.pageSize)
					.then(
						res => {
							console.log(res.data.data);
							this.pageInfo = res.data.data
						})
			},
			getCourseStatusOrder() {
				this.axios.get("http://localhost:8080/user/order/" + 1 + "/" + this.status + "/" + this.currentPage + "/" +
					this.pageSize).then(
					res => {
						console.log(res.data.data);
						this.pageInfo = res.data.data
					})
			},
			getCampStatusOrder() {
				this.axios.get("http://localhost:8080/user/campOrder/" + 1 + "/" + this.status + "/" + this.currentPage +
					"/" + this.pageSize).then(
					res => {
						console.log(res.data.data);
						this.pageInfo = res.data.data
					})
			},
			handleAllCourseSize(val) {
				console.log(`每页 ${val} 条`);
				this.pageSize = val;
				this.getCourseOrder();
			},
			handleAllCourseCurrent(val) {
				console.log(`当前页: ${val}`);
				this.currentPage = val;
				this.getCourseOrder();
			},
			handleCourseSize(val) {
				console.log(`当前页: ${val}`);
				this.pageSize = val;
				this.getCourseStatusOrder();
			},
			handleCourseSize(val) {
				console.log(`当前页: ${val}`);
				this.currentPage = val;
				this.getCourseStatusOrder();
			},
			handleAllCoachSize(val) {
				console.log(`每页 ${val} 条`);
				this.pageSize = val;
				this.getCampOrder();
			},
			handleAllCoachCurrent(val) {
				console.log(`当前页: ${val}`);
				this.currentPage = val;
				this.getCampOrder();
			},
			handleCoachSize(val) {
				console.log(`当前页: ${val}`);
				this.pageSize = val;
				this.getCampStatusOrder();
			},
			handleCoachSize(val) {
				console.log(`当前页: ${val}`);
				this.currentPage = val;
				this.getCampStatusOrder();
			},
			//教练信息按钮的点击事件方法
			showCoach(index, row) {
				console.log(row.courseCoach);
				//点击之后，显示弹出框
				this.coachFormVisible = true;
				//点击编辑按钮之后，用户信息会显示在框中，方便修改
				this.coach = {
					...row.coach
				};
			},
			//课程信息按钮的点击事件方法
			showCourse(index, row) {
				console.log(row);
				//点击之后，显示弹出框
				this.courseFormVisible = true;
				//点击编辑按钮之后，用户信息会显示在框中，方便修改
				this.course = {
					...row.courseDetails,
				}

			},
			showCamp(index, row){
				console.log(row);
				//点击之后，显示弹出框
				this.campFormVisible = true;
				//点击编辑按钮之后，用户信息会显示在框中，方便修改
				console.log(row.courseDetailsCamp)
				this.course = {
					...row.courseDetailsCamp[0],
				}
			}
		},
		created() {
			this.getBalance();
			this.getCourseOrder();
		}
	};
</script>

<style>
</style>
